<template>
  <div id="login_container" class="login_container">
    <div class="login-right">
      <span>实验系统</span>
    </div>
    <div class="login-panel">
      <el-form
          ref="loginFormRef"
          label-width="auto"
          style="max-width: 600px"
          :rules="loginRules"
          :model="loginData"
      >
        <!-- 用户名 -->
        <el-form-item prop="username" class="margin_bottom_20">
          <el-input ref="username" placeholder="账户名称" v-model="loginData.username" name="username" class="input_css" prefix-icon="UserFilled"/>
        </el-form-item>
        <el-form-item prop="password">
          <el-input ref="password" placeholder="账户密码" v-model="loginData.password" name="password" class="input_css" type="password" prefix-icon="Lock"/>
        </el-form-item>
        <el-form-item>
          <el-button :loading="loading" type="primary" @click="login" class="primary_btn">登陆系统</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import type {LoginData} from "@/api/auth/model"
import type {FormInstance} from "element-plus";
import {ElButton, ElForm, ElFormItem, ElInput} from 'element-plus'
import {ref} from 'vue';
import {useUserStore} from "@/stores";
import { LocationQuery, LocationQueryValue } from "vue-router";
import router from "@/router";

const userStore = useUserStore();
const loading = ref(false); // 按钮loading

const loginData = ref<LoginData>({
  username: "admin",
  password: "admin",
});
const loginFormRef = ref<FormInstance>(); // 登录表单ref
const route = useRoute();

const login = () => {
  console.log("登陆信息：", loginData.value.username, loginData.value.password)
  loginFormRef.value?.validate((valid: boolean) => {
    if (valid) {
      loading.value = true;
      userStore.login(loginData.value).then(() => {
        console.log("登陆成功");
        const query: LocationQuery = route.query;
        const redirect = (query.redirect as LocationQueryValue) ?? "/";
        const otherQueryParams = Object.keys(query).reduce(
            (acc: any, cur: string) => {
              if (cur !== "redirect") {
                acc[cur] = query[cur];
              }
              return acc;
            },
            {}
        );
        //router.push('/dashboard');
        router.push({ path: redirect, query: otherQueryParams });
      })
    }
  });
}

const loginRules = computed(() => {
  return {
    username: [
      {
        required: true,
        trigger: "blur",
        message: "用户名不能为空",
      },
    ],
    password: [
      {
        required: true,
        trigger: "blur",
        message: "用户密码不能为空",
      },
      {
        min: 5,
        trigger: "blur",
        message: "用户密码不能小于5位",
      },
    ]
  };
});

</script>

<style scoped>

.margin_bottom_20 {
  margin-bottom: 20px;
}

.primary_btn {
  width: 100%;
  height: 40px;
  font-size: 16px;
  letter-spacing: 5px;
}

.input_css {
  width: 100%;
  height: 40px;
}
.login_container {
  position: relative;
  display: flex;
  justify-content: right;
  align-items: center;
  height: 100%;
  width: 100%;
  background: url("@/assets/images/login_bg_dark.png") no-repeat center right;
}

.login-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 300px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  padding: 10px;
  margin-right: 100px;
}
.login-right{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70%;
  font-weight: bold;
  color: #f2f2f2;
  font-size: 100px;
  height: 300px;
}
</style>